<template>
	<view class="u-margin-left-20 u-margin-right-20">
		<!-- 楼盘图片轮播 -->
		<view>
			<u-swiper :list="swiperlist" :height="500" mode="number" effect3d effect3d-previous-margin=""
				:interval="5000" @click="clickImg"></u-swiper>
		</view>

		<!-- body -->
		<view class="body_count">

			<!-- 内容1 -->
			<view class="count_box1">
				<view class="box1_title">
					<text> {{building.address}}</text>
				</view>

				<view class="box1_detail">
					<view class="detail_item">
						<view>
							<text class="font1">{{building.price}} <text class="font2">元</text></text>
						</view>
						<view style="margin-top: 8rpx;">
							<text class="font3">参考总价</text>
						</view>
					</view>

					<view class="detail_item">
						<view>
							<text class="font1">3室2厅2卫 </text>
						</view>
						<view style="margin-top: 8rpx;">
							<text class="font3">户型</text>
						</view>
					</view>

					<view class="detail_item">
						<view>
							<text class="font1">{{building.onSaleArea}}m²</text>
						</view>
						<view style="margin-top: 8rpx;">
							<text class="font3">建筑面积</text>
						</view>
					</view>
				</view>

				<view class="box1_icon">
					<view class="icon_item" v-for="(item,index) in baseTags">
						<text>{{item.name}}</text>
					</view>
					
				</view>
			</view>

			<!-- 内容2 -->
			<view class="count_box1 count_box2">
				<view class="box2_title">
					<text>房屋信息</text>
				</view>

				<view class="box2_list">
					<view class="msg">
						<view class="font1">
							<text class="">在售面积</text>
						</view>
						<view class="font2">
							<text class="">{{building.onSaleAreaMin}} - {{building.onSaleArea}}㎡</text>
						</view>
					</view>

					<view class="msg">
						<view class="font1">
							<text class="">佣金金额</text>
						</view>
						<view class="font2">
							<text class="">{{building.commission}}元</text>
						</view>
					</view>

					<view class="msg">
						<view class="font1">
							<text class="">总规划期数</text>
						</view>
						<view class="font2">
							<text class="">{{building.totalPeriods}}期</text>
						</view>
					</view>

					<view class="msg">
						<view class="font1">
							<text class="">在售楼盘期数</text>
						</view>
						<view class="font2">
							<text class="">{{building.selectedPeriod}}期</text>
						</view>
					</view>

					<view class="msg">
						<view class="font1">
							<text class="">在售楼盘状态</text>
						</view>
						<view class="font2">
							<text class="">{{building.status}}</text>
						</view>
					</view>

					

					<view class="msg">
						<view class="font1">
							<text class="">预售证号</text>
						</view>
						<view class="font2">
							<text class="">{{building.presaleNumber}}</text>
						</view>
					</view>

					<view class="msg">
						<view class="font1">
							<text class="">物业费</text>
						</view>
						<view class="font2">
							<text class="">{{building.propertyFee}}元/㎡</text>
						</view>
					</view>
					
					
					
					
					

				</view>

			</view>

			<!-- 内容3 -->
			<view class="count_box1 count_box2" style="margin-top: 24rpx;">
				<view class="box2_title">
					<text>房子亮点</text>
				</view>

				<view class="" style="margin-top: 24rpx;">
					<!-- 文章内容 -->
					<liu-show-hide showText="展开" hideText="收起" @change="change">
						<view class=""><text>房东急售！送车位，大户型！精装修，价格可谈！家装大三房！拎包入驻！</text></view>
					</liu-show-hide>
				</view>
			</view>

			<!-- 内容4 -->
			<view class="count_box1 count_box2">
				<view class="box2_title">
					<text>{{building.buildingName}}</text>
				</view>

				<view class="box1_detail">
					<view class="detail_item">
						<view>
							<text class="font1">7000 <text class="font2">元</text></text>
						</view>
						<view style="margin-top: 8rpx;">
							<text class="font3">小区均价</text>
						</view>
					</view>

					<view class="detail_item">
						<view>
							<text class="font1">8000元/m² </text>
						</view>
						<view style="margin-top: 8rpx;">
							<text class="font3">同段小区均价</text>
						</view>
					</view>

					<view class="detail_item">
						<view>
							<text class="font1">7000元/m²</text>
						</view>
						<view style="margin-top: 8rpx;">
							<text class="font3">同户型均价</text>
						</view>
					</view>
				</view>

				<view class="box2_list">
					<view class="msg">
						<view class="font1">
							<text class="">物业公司</text>
						</view>
						<view class="font2">
							<text class="">{{building.propertyCompany}}</text>
						</view>
					</view>

					<view class="msg">
						<view class="font1">
							<text class="">绿化率</text>
						</view>
						<view class="font2">
							<text class="">{{building.greeningRate}}%</text>
						</view>
					</view>

					<view class="msg">
						<view class="font1">
							<text class="">交房时间</text>
						</view>
						<view class="font2">
							<text class="">{{gettime(building.deliveryTime)}}</text>
							<!-- <text class="">{{building.deliveryTime}}</text> -->
						</view>
					</view>

					<view class="msg">
						<view class="font1">
							<text class="">开发商</text>
						</view>
						<view class="font2">
							<text class="">{{building.developer}}</text>
						</view>
					</view>


				</view>

			</view>

			<!-- 内容5 -->
			<view class="count_box1 count_box2">
				<view class="box2_title">
					<text>房屋地址</text>
				</view>

				<map :latitude="latitude" :longitude="longitude" style="margin-top: 24rpx;">
					<cover-view style='width:100%;height:100%;' @click="clickMap"></cover-view>
				</map>
			</view>

			<!-- 内容6 -->
			<view class="count_box1 count_box2">
				<view class="box2_title">
					<text>代理经理</text>
				</view>

				<!-- 联系信息  -->
				<view class="store-info" style="position: relative;">
					<view class="logo">
						<u-image width="120rpx" mode="aspectFit" height="120rpx" :src="clerk.agentLogo"></u-image>
					</view>
					<view class="name-star star-con">
						<div class="name">
							<span class="shopTag">{{clerk.storeName}}</span>
						</div>
						<div class="store-row">
							<div class="collectionNum">{{clerk.clerkName}}</div>
							<div class="goodsNum">{{clerk.workingYear}}-{{clerk.agentLevel}}-{{clerk.serviceCount}}
							</div>
						</div>
					</view>
					<view class="to-store-btn">
						<u-icon name="chat-fill" color="#409EFF" size="40" @click="openChat(clerk.memberId)"></u-icon>
						<u-icon name="phone" color="#409EFF" size="40" @click="clickItem(clerk.mobile)"></u-icon>

					</view>
				</view>
			</view>

			<!--猜你喜欢-->
			<view class="title2">— 猜你喜欢 —</view>
			<!-- 楼盘列表 -->
			<buildTemplate style="width: 100%; padding-bottom: 10rpx;" :res='buildingList' :storeName='false' />

			<!-- 底部导航 -->
			<view class="navigation">
				<view class="left">
					<button type="default" open-type="contact" class="clearBtn" style="font-size: 14px;color: #6a6a6a;">
						<view class="item" @click="goToIm(building)">
							<u-icon name="server-fill" :size="40"></u-icon>
							<view class="text">客服</view>
						</view>
					</button>
					<view class="item" @click="heartHouse">
						<u-icon size="30" :color="favorite ? '#f2270c' : '#262626'"
							:name="favorite ? 'heart-fill' : 'heart'"></u-icon>
						<view :style="{ color: favorite ? '#f2270c' : '#262626' }">{{
		              favorite? "已收藏": "收藏"
		            }}</view>
					</view>
					<button type="default" open-type="share" class="clearBtn" style="font-size: 14px;color: #6a6a6a;">
						<view class="item">
							<u-icon name="zhuanfa" :size="40"></u-icon>
							<view class="text">分享</view>
						</view>
					</button>
					<button type="default" open-type="share" class="clearBtn" style="font-size: 14px;color:  #2979ff;">
						<view class="item" @click="clickItem(clerk.mobile)">
							<u-icon name="phone" :size="40"></u-icon>
							<view class="text">联系经纪人</view>
						</view>
					</button>

				</view>

				<u-back-top :scroll-top="scrollTop" top="1000"></u-back-top>

			</view>

		</view>
	</view>
</template>

<script>
	import {
		findBuildingById,
		selectBuildingEvals,
		getAllBuildings,
		addNotice
	} from "@/api/building";
	import {
		selectHouseHeart,
		saveHeart
	} from "@/api/house";
	import buildTemplate from '@/components/m-goods-list/buildList'
	import storage from "@/utils/storage.js";
	import {
		getClerkByUserId
	} from "@/api/store";

	export default {
		components: {
			buildTemplate
		},
		
		data() {
			return {
				scrollTop: 0,
				buildingList: [],
				//tagList: ['在售', '住宅', '大户型', '南北通透', '厨卫全明'],
				columns: [{ //户型数据
					title: '主力户型',
					layouts: []
				}],
				user: {},
				favorite: false,
				clerk: {},
				building: {
					buildingName: '',
					price: '',
					address: '',
					totalPeriods: '',
					selectedPeriod: '',
					greeningRate: '',
					introduce: '',
					agentAvatar: '',
					agentName: '',
					agentPhone: '',
					imageList: [],
					onSaleAreaMin: '',
					onSaleAreaMax: '',
					roomCount: '',
					openDate: '',
					commission: '',
					status: '',
					deliveryTime: '',
					presaleNumber: '',
					propertyFee: '',
					developer: '',
					propertyCompany: '',
					longitude: '',
					latitude: '',
					clerkName: '',
					clerkPhone: ''
				},
				invitationCode: '',
				swiperlist: [],
				baseTags: [],
				// 评价列表
				evaluList: [],
				longitude: 120.14,
				latitude: 30.35,
				distance: 0,
				// 自己的评论
				ownevalu: '',
				buildingId: null,
				evalsize: 0,
				havem: false,
				evaluate: '',
				credt: '',
				paramsMap: {
					pageNumber: 1,
					pageSize: 10,
					storeId: "",
				}
			};
		},
		onLoad: function(option) {
			this.user = storage.getUserInfo();

			let buildingId = option.id; // 上个页面传递的参数。
			this.buildingId = buildingId;

			if (undefined != option.invitationCode) {
				//this.invitationCode=option.invitationCode
				uni.setStorageSync("invitationCode", option.invitationCode);
			}
			console.info("邀请人信息===" + option.invitationCode)
			// 渲染当前楼盘信息
			this.findBuildingById(buildingId);
			// this.selectHouseHeart(buildingId)
			this.findBuildingList();
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			gettime(timer){
				
				// 解析日期时间字符串
				const date = new Date(timer);
				
				// 调整时间（简单地将小时数从 0 改为 14）
				// 注意：这不会考虑时区或夏令时变化
				date.setHours(14, 0, 0, 0);
				
				// 格式化日期时间
				const year = date.getFullYear();
				const month = date.getMonth() + 1; // 月份从 0 开始
				const day = date.getDate();
				const hours = date.getHours();
				const minutes = date.getMinutes();
				
				// 格式化月份和日期去掉前导零
				const formattedMonth = month < 10 ? month : month;
				const formattedDay = day < 10 ? day : day;
				
				// 拼接成目标格式
				const formattedDatetimeStr = `${year}-${formattedMonth}-${formattedDay} ${hours}:${minutes.toString().padStart(2, '0')}`;
				
				console.log(formattedDatetimeStr); // 输出 2025-5-21 14:00
				return formattedDatetimeStr
			},
			openNotice() { //开盘通知
				if (!this.favorite) { //假如未收藏
					//收藏
					this.heartHouse();
				}
				//addNotice
				addNotice({
					id: this.buildingId,
					userId: this.user.id,
					noticeType: 1,
					content: '开盘通知'
				}).then((result) => {
					if (result.data.success) {
						//提示
						uni.showToast({
							title: '房产信息已经收藏,可以在我的收藏中查看,若有更新将在消息中及时推送更新信息',
							icon: 'none'
						});
					} else {
						uni.showToast({
							title: result.data.message,
							icon: 'none'
						});
					}
				});

			},
			priceChangeNotice() { //变价通知
				if (!this.favorite) { //假如未收藏
					//收藏
					this.heartHouse();
				}
				//addNotice
				addNotice({
					id: this.buildingId,
					userId: this.user.id,
					noticeType: 2,
					content: '变价通知'
				}).then((result) => {
					if (result.data.success) {
						//提示
						uni.showToast({
							title: '房产信息已经收藏,可以在我的收藏中查看,若有更新将在消息中及时推送更新信息',
							icon: 'none'
						});
					} else {
						uni.showToast({
							title: result.data.message,
							icon: 'none'
						});
					}
				});

			},
			selectHouseHeart(buildId) {
				let that = this
				var vuex_user = storage.getUserInfo();
				if (vuex_user) {
					selectHouseHeart({
						buildId: buildId,
						userId: vuex_user.id,
					}).then((result) => {
						if (result.data.data) {
							that.favorite = true;
						} else {
							that.favorite = false
						}
						// that.room.heart = result.data.data

					});
				}
			},
			heartHouse() {
        if (this.$options.filters.tipsToLogin()) {
          saveHeart({
            heart: this.favorite,
            buildId: this.building.id,
            userId: storage.getUserInfo().id
          }).then((result) => {
            uni.showToast({
              title: result.data.msg,
              icon: 'none'
            });
            this.selectHouseHeart(this.buildingId);
          });
        }

			},
			openChat(id) {
        if (this.$options.filters.tipsToLogin()) {
          uni.navigateTo({
            url: `/pages/mine/im/index?userId=${id}&buildId=` + this.building.id
          });
        }


				//this.$options.filters.talkIm(id, 'www', 'www9');

			},
			clickItem(agentPhone) {
        if (this.$options.filters.tipsToLogin()) {
          // 拨打固定电话
          uni.makePhoneCall({
            phoneNumber: agentPhone,
          });
        }

			},
			findBuildingList() { //楼盘
				getAllBuildings(this.paramsMap).then(res => {
					if (res.statusCode === 200) {
						if (res.data.length > 0) {
							this.buildingList.push(...res.data);
							this.cachedBuildingList[this.type] = this.buildingList;
							this.hasMoreMap[this.type] = true;
							this.loadStatusMap[this.type] = 'loadmore';
						} else {
							this.hasMoreMap[this.type] = false;
							this.loadStatusMap[this.type] = 'nomore';
						}
					}
				})
			},
			findBuildingById(buildingId) {
				let hasGotLocation = false; // 添加标志变量

				findBuildingById(
					buildingId
				).then((result) => {
					let building = result.data.result;
					//户型数据
					if (undefined != building.images) {
						var imageList = JSON.parse(building.images);
						this.swiperlist = imageList.map(val => {
							return {
								title: val,
								image: val
							};
						});
					}

					var layouts = JSON.parse(building.layouts);
					//将 building.layouts 里的字段images 字符串转换成数组
					for (var i = 0; i < layouts.length; i++) {
						layouts[i].images = JSON.parse(layouts[i].images);
					}

					this.columns[0].layouts = layouts;



					this.baseTags = JSON.parse(building.checkboxList);
					this.building = {
						...this.building,
						...building
					};

					// 判断是否收藏
					this.selectHouseHeart(buildingId);
					// 查询楼盘评价
					this.selectBuildingEvals(buildingId);
					// 经纬度
					this.longitude = building.longitude;
					this.latitude = building.latitude;
					// 计算距离
					let lat1 = 39.909;
					let lng1 = 116.39742;
					let lat2 = this.latitude;
					let lng2 = this.longitude;
					if (!hasGotLocation) { // 检查是否已经获取过位置
						uni.getLocation({
							type: 'gcj02',
							success: res => {
								lat1 = res.latitude;
								lng1 = res.longitude;
								this.distance = this.getDistance(lat1, lng1, lat2, lng2);
								hasGotLocation = true; // 设置标志变量为已获取
							}
						});
					}

					// 查询当前楼盘的经纪人信息

					getClerkByUserId(this.building.selectedBrokerId).then((result) => {

						if (result.data.code == 200) {
							this.clerk = result.data.result
						}
					});


				});
			},
			selectBuildingEvals(buildingId) {

				selectBuildingEvals({
					buildId: buildingId,
					pageNum: 1,
					pageSize: 1
				}).then((result) => {
					if (result.data.total > 0) {
						this.evaluate = result.data.rows[0].evaluate;
						if (this.evaluate.length > 30) {
							this.evaluate = this.evaluate.substring(0, 30) + "......";
						}
						this.credt = result.data.rows[0].createTime;
						this.havem = true;
						this.evalsize = result.data.total;
					}
				});
			},
			goToIm(item) {
        if (this.$options.filters.tipsToLogin()) {
          uni.navigateTo({
            url: `/pages/mine/im/index?userId=${item.selectedBrokerId}&buildId=` + item.id
          });
        }

				///this.$options.filters.talkIm(item.selectedBrokerId, '', '')
			},
			// 新增分享函数
			onShareAppMessage() {
				console.info("新增分享函数")
				return {
					title: this.building.buildingName, // 分享标题
					path: `/pages/store/buildingDetail?id=${this.buildingId}` + "&invitationCode=" + this.user
						.id, // 自定义分享链接
					imageUrl: this.swiperlist[0].image // 分享图片
				};
			},
			moreEval() {
				uni.navigateTo({
					url: '/pages/house/detail/evalList?buildId=' + this.buildingId
				});
			},
			clickImg(index) {
				let imgArr = this.swiperlist.map(val => {
					return val.image;
				});
				// 预览图片
				uni.previewImage({
					current: index,
					urls: imgArr
				});
			},
			clickMap(e) {
				uni.openLocation({
					longitude: Number(this.longitude),
					latitude: Number(this.latitude),
					name: this.building.address,
					address: this.building.address
				});
			},
			getDistance(lat1, lng1, lat2, lng2) {
				lat1 = lat1 || 0;
				lng1 = lng1 || 0;
				lat2 = lat2 || 0;
				lng2 = lng2 || 0;
				var rad1 = lat1 * Math.PI / 180.0;
				var rad2 = lat2 * Math.PI / 180.0;
				var a = rad1 - rad2;
				var b = lng1 * Math.PI / 180.0 - lng2 * Math.PI / 180.0;
				var r = 6378137;
				var distance = r * 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(rad1) * Math.cos(rad2) *
					Math.pow(Math.sin(b / 2), 2)));
				return (distance / 1000).toFixed(2);
			}
		}
	};
</script>

<style>
	/* page不能写带scope的style标签中，否则无效 */
	page {
		background-color: rgb(255, 255, 255);
	}
</style>

<style lang="scss" scoped>
	.body_count {
		background-color: rgb(245, 245, 245);
		height: auto;
		width: 100%;
		padding: 0 32rpx;
		position: relative;



		.count_box1 {
			background-color: #FFF;
			// border: 1px red solid;
			width: 100%;
			height: auto;
			border-radius: 18rpx;
			position: relative;
			top: -45px;
			padding: 20rpx;


			.box1_title {
				font-size: 32rpx;
				font-weight: 600;
			}

			.box1_detail {
				display: flex;
				align-items: center;
				// justify-content: flex-start;
				margin-top: 36rpx;

				.detail_item {
					// border: 1px red solid;
					margin-right: auto;
					white-space: nowrap;

					.font1 {
						font-size: 36rpx;
						font-weight: 600;
					}

					.font2 {
						font-size: 24rpx;
						font-weight: 400;
					}

					.font3 {
						font-size: 24rpx;
						font-weight: 400;
						color: rgba(11, 12, 15, 0.5);
					}
				}
			}

			.box1_icon {
				// border: 1px red solid;
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				margin-top: 24rpx;

				.icon_item {
					background-color: rgb(237, 244, 255);
					color: rgb(88, 107, 144);
					font-size: 24rpx;
					padding: 4rpx 24rpx;
					margin-right: 16rpx;
					font-weight: 600;
				}
			}
		}


		.count_box2 {
			margin-top: 20rpx;

			.box2_title {
				font-size: 32rpx;
				font-weight: 900;
			}

			.box2_list {
				margin-top: 24rpx;
				width: 100%;


				.msg {
					display: flex;
					align-items: center;
					margin-bottom: 24rpx;
					// border: 1px red solid;
					width: 100%;

					.font1 {
						font-size: 28rpx;
						color: rgba(11, 12, 15, 0.5);
					}

					.font2 {
						font-size: 28rpx;
						color: rgb(11, 12, 15);
						margin-left: 40rpx;

						margin-left: auto;
					}
				}
			}
		}


	}

	map {
		width: 100%;
		height: 350rpx;
	}

	.item {
		padding: 25rpx;
		line-height: 80rpx;
		margin-top: -30rpx;
	}

	.item-title {
		font-size: 42rpx;
		color: $u-main-color;
		font-weight: bold;
	}

	.item-price {
		font-weight: normal;
		font-size: 45rpx;
		color: $u-type-warning;
	}

	.item-desc {
		font-weight: normal;
		font-size: 36rpx;
		color: $u-tips-color;
	}

	.arrow-right {
		position: absolute;
		top: 80rpx;
		right: 28rpx;
		font-weight: normal;
		font-size: 28rpx;
		color: $u-tips-color;

		.phone {
			width: 90rpx;
			height: 90rpx;
			border-radius: 100%;
			box-shadow: 0px 1px 20px 0px rgba(0, 0, 0, 0.1);
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}

	.wayClass {
		color: #606266;
		padding: 30rpx;
		line-height: 50rpx;
	}

	.clearBtn {
		margin: 0;
		padding: 0;
		line-height: 1;
		background-color: #FFFFFF;
	}

	.clearBtn::after {
		position: unset !important;
		border: unset;
	}

	.navigation {
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 0rpx 15rpx;
		background-color: #ffffff;
		box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.05);
		z-index: 9999;

		.left {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 38rpx;
			font-size: 14px;
			color: #6a6a6a;

			.item {
				display: flex;

				.text {
					margin-left: 4rpx;
				}
			}
		}

		.right {
			display: flex;
			font-size: 28rpx;
			align-items: center;

			.btn {
				line-height: 66rpx;
				margin-left: 30rpx;
				padding: 5rpx 50rpx;
				color: #ffffff;
				border-radius: 36rpx;
				background-color: #2979ff;
			}
		}
	}



	.text-2xl {
		font-size: 1.5rem;
		line-height: 2rem;
	}

	.text-xl {
		font-size: 1.25rem;
		line-height: 1.75rem;
	}

	.text-gray-600 {
		color: #718096;
	}

	.text-orange-500 {
		color: #ed8936;
	}

	.font-bold {
		font-weight: 700;
	}

	.grid {
		display: grid;
	}

	.grid-cols-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.gap-4 {
		gap: 1rem;
	}

	.mb-2 {
		margin-bottom: 0.5rem;
	}

	.mt-2 {
		margin-top: 0.5rem;
	}

	.flex {
		display: flex;
	}

	.flex-col {
		flex-direction: column;
	}

	.items-center {
		align-items: center;
	}

	.w-full {
		width: 100%;
	}

	.h-64 {
		height: 16rem;
	}

	.object-cover {
		object-fit: cover;
	}

	.text-lg {
		font-size: 1.125rem;
		line-height: 1.75rem;
	}





	/* panel */
	.ex-mall-panel-bg-color {
		background-color: #ffffff;
	}

	.ex-mall-panel-title-bg-color {
		background-color: #f7f7f7;
	}

	.ex-mall-panel-title-color {
		color: #292929;
	}

	.ex-mall-panel-content-bg-color {
		background-color: #f7f7f7;
	}

	/* panel another */
	.ex-mall-panel-another-bg-color {
		background-color: #ffffff;
	}

	.ex-mall-panel-another-title-bg-color {
		background-color: #f7f7f7;
	}

	.ex-mall-panel-another-title-color {
		color: #292929;
	}

	.ex-mall-panel-another-content-bg-color {
		background-color: #f7f7f7;
	}

	.ex-mall-panel-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 32px 28px 24px 28px;
		font-size: 21px;
		font-weight: 600;
		border-radius: 2em 2em 0 0;
		overflow: hidden;
	}

	.ex-mall-panel.column {
		//padding-top: 32px;

		.ex-mall-panel-content {
			.column-list {
				display: flex;
				align-items: flex-start;

				&>.item {
					padding: 0 16px 24px 0;

					&:first-child {
						padding-left: 28px;
					}

					&:last-child {
						padding-right: 28px;
					}

					&:nth-child(odd) {
						&>.thumbnail {
							&>.img {
								background-color: #0eaa90;
							}
						}
					}

					&:nth-child(even) {
						&>.thumbnail {
							&>.img {
								background-color: #f8e3dc;
							}
						}
					}

					&>.thumbnail {
						position: relative;

						&>.img {
							position: relative;
							z-index: 1;
							display: block;
							// width: 188px;
							// height: 218px;
							width: 154px;
							height: 200px;
							border-radius: 12px;
						}

						&>.btn {
							position: absolute;
							top: 14px;
							right: 14px;
							z-index: 10;
							display: flex;
							justify-content: center;
							align-items: center;
							width: 28px;
							height: 28px;
							border-radius: 9px;
							background-color: #ffffff;

							&.favorite {
								&>.icon {
									font-size: 15px;
									color: #292929;
								}
							}
						}
					}

					&>.info {
						line-height: 1;

						&>.title {
							margin-top: 20px;
							line-height: 1.3;
							font-size: 15px;
							font-weight: 600;
						}

						&>.price {
							margin-top: 10px;
							font-size: 13px;
						}
					}
				}
			}
		}
	}

	.container {
		background-color: #fff;
		padding: 20rpx;
		border-radius: 10rpx;
	}

	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.title {
		font-size: 36rpx;
		font-weight: bold;
	}

	.more-info {
		font-size: 28rpx;
		color: #999;
	}

	.tags {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 20rpx;
	}

	.tag {
		background-color: #f4f4f4;
		color: #333;
		padding: 8rpx 16rpx;
		border-radius: 5rpx;
		margin-right: 10rpx;
		margin-bottom: 10rpx;
		font-size: 28rpx;
	}

	.price-area {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;
	}

	.price {
		text-align: left;
	}

	.price-value {
		font-size: 48rpx;
		color: #f30;
		font-weight: bold;
	}

	.price-unit {
		font-size: 32rpx;
		color: #f30;
	}

	.price-note {
		font-size: 28rpx;
		color: #999;
	}

	.area {
		text-align: right;
	}

	.area-value {
		font-size: 40rpx;
		font-weight: bold;
	}

	.area-unit {
		font-size: 32rpx;
	}

	.area-note {
		font-size: 28rpx;
		color: #999;
	}

	.details {
		margin-bottom: 20rpx;
	}

	.detail-item {
		display: flex;
		align-items: center;
		margin-bottom: 10rpx;
	}

	.detail-label {
		font-size: 32rpx;
		color: #999;
		width: 150rpx;
	}

	.detail-value {
		font-size: 32rpx;
		color: #333;
	}

	.address {
		color: #409EFF;
		text-decoration: underline;
	}

	.ranking {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.ranking-icon {
		margin-right: 10rpx;
	}

	.ranking-text {
		font-size: 32rpx;
		color: #DAA520;
	}

	.btn-group {
		display: flex;
		justify-content: space-between;
	}

	.btn {
		background-color: #f4f4f4;
		border: none;
		border-radius: 5rpx;
		padding: 16rpx 32rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 48%;
	}

	.btn-text {
		font-size: 32rpx;
		color: #409EFF;
		margin-left: 10rpx;
	}

	.agent-info {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.agent-avatar {
		margin-right: 20rpx;
	}

	.agent-details {
		line-height: 1.4;
	}

	.agent-name {
		font-size: 32rpx;
		font-weight: bold;
	}

	.agent-intro {
		font-size: 28rpx;
		color: #999;
	}

	.contact-icons {
		display: flex;
		justify-content: flex-end;
	}

	.contact-icons u-icon {
		margin-left: 20rpx;
	}

	.mr-10p {
		margin-right: 10%;
	}




	.store-info {
		display: flex;
		align-items: center;
		// justify-content: space-between;
		background: #fff;
		margin-top: 24rpx;
		// padding: 40rpx 20rpx 50rpx;

		.logo {
			overflow: hidden;
			border-radius: 6px;

			>img {
				width: 100%;
				height: 100%;
			}
		}

		.name-star {
			// flex: 1;
			margin-left: 20rpx;

			.name {
				display: flex;
				align-items: center;
				width: 100%;
				line-height: 1;
				font-weight: 700;
				font-size: 28rpx;
			}

			.desc {
				font-size: 12px;
				color: #999;
				margin-left: 10px;

				text {
					margin-right: 10px;
				}
			}
		}

		.to-store-btn {
			display: flex;
			align-items: center;
			// height: 100%;
			margin-left: auto;

			>view {
				font-size: 28rpx;
				color: #fff;
				width: auto;
				height: auto;
				margin-left: 32rpx;
				// line-height: 60rpx;
				text-align: center;
				//background: $main-color;
				border-radius: 28rpx;
			}
		}
	}


	.title2 {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 60upx;
		color: #979797;
		font-size: 28upx;
	}
</style>